<template>
  <div style="height: 600px">
    <el-container>
      <el-container>
        <!-- 主体-->
        <el-main>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
            <el-form-item  label="用户名" prop="username" >
              <el-input type="user" v-model="ruleForm.username" autocomplete="off" plain disabled style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item  label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off" plain disabled style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" >
              <el-input v-model.number="ruleForm.phone" plain disabled style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item  label="邮箱" prop="email" >
              <el-input type="mailbox" v-model="ruleForm.email" plain disabled style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  @click="edit">修改信息</el-button>
            </el-form-item>
          </el-form>
          <!--   弹出表单-->
          <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" width="450px">
            <el-form :model="ruleForm2" status-icon :rules="rules" ref="ruleForm2" label-width="60px" class="demo-ruleForm"  >
              <el-form-item  label="用户名" prop="username">
                <el-input type="user" v-model="ruleForm2.username" autocomplete="off"  style="width: 70%"></el-input>
              </el-form-item>
              <el-form-item  label="密码" prop="password">
                <el-input type="password" v-model="ruleForm2.password" autocomplete="off" style="width: 70%" ></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone" >
                <el-input v-model.number="ruleForm2.phone" style="width: 70%" ></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email" >
                <el-input type="mailbox" v-model="ruleForm2.email"  style="width: 70%"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm()">确认修改</el-button>
              <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {IP} from "@/config";
import axios from "axios";
export default {
  props: {
    msg: String
  },
  mounted() {
    this.info = JSON.parse(sessionStorage.getItem("info"))
    this.ruleForm = this.info
  },
  methods: {
    edit(){
      this.dialogFormVisible = true
      this.ruleForm2 = Object.assign({},this.ruleForm)
    },
    submitForm() {
      this.$refs["ruleForm2"].validate((valid) => {
        if (valid) {
          let url = IP + "user/edit"
          axios.post(url, this.ruleForm2).then(res => {
            console.log('请求成功')
            console.log(res)
            if (res.data.code === 0) {
              this.ruleForm = Object.assign({},this.ruleForm2)
              sessionStorage.setItem("info",JSON.stringify(this.ruleForm))
              this.$router.go(0)
              this.dialogFormVisible=false;
              return this.$message.success(res.data.data.status)
            } else {
              this.$message.error(res.data.data.status);
            }
          }).catch(error => {
            console.log('请求失败')
            console.log(error)
            this.$message.error('请求失败');
          })
        } else {
          this.$message.error('更新用户信息失败！')
        }
      });
    },
  },
  data() {
    const checkMailbox = (rule, value, callback) => {
      // eslint-disable-next-line no-useless-escape
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'));
      }
      setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的'));
        } else {
          callback();
        }
      }, );
    };
    const validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }else {
          callback();
        }
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      setTimeout(() => {

          if (value.length!==11) {
            callback(new Error('请输入正确的电话号码'));
          } else {
            callback();
          }

      }, 1000);
    };

    return {
      videoVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      ruleForm: {},
      ruleForm2:{
        id:'',
        username:'',
        password: '',
        phone: '',
        email: ''
      },
      rules: {
        username:[{
          validator: validateUser, trigger: 'blur'
        }],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        phone : [
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { validator: checkMailbox, trigger: 'blur' }
        ]
      },
      info:{}
    };
  },


}
</script>